<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 500px;
				height: 1500px;/* 滚动条 */
				/* 背景尺寸：函数：contain cover */
				background-size: contain;
				background-image: url(img/动漫可爱卡通形象蜡笔小新_爱给网_aigei_com.png);
				/* 背景图控制属性 :滚动  固定*/
				background-attachment:fixed;
			}
			div{
				width: 500px;
				height: 500px;
				back ground-color: #e4393c;
				background-image: url(img/动漫可爱卡通形象蜡笔小新_爱给网_aigei_com.png);
				background-repeat: no-repeat;
				back ground-repeat: repeat-x;
				back ground-repeat: repeat-y;
				/* 背景尺寸  属性值：数值/百分比
				函数cover 等比例宽高【放大】覆盖整个
				   contain        [缩放]  保证页面图片全部显示 
				*/
			    border: 1px solid red;
				background-size: 20%;
				/* 背景定位：先决条件 背景图小于外围空间 */
				background-position: bottom center;
				background-position: 80% 0;
				/* 复合属性 */
				/* background:background-image  background-color: background-position
				              background-size background-attachment
				 ;; */
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, suscipit, officia enim iusto veritatis autem praesentium error deserunt soluta eum dignissimos sunt architecto maxime quisquam non doloremque reprehenderit quas. Reiciendis.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga et unde eligendi facere molestiae? Fugiat accusantium animi ipsa magnam! Ad aliquam reiciendis explicabo numquam repudiandae non fuga totam quidem. Consequatur.
		<!-- css背景：背景图 背景颜色 ---区别：页面任意移动位置
		 html图片 img               ---区别：页面定死位置
		 子属性
		 background-color背景颜色：
		 复合属性
		 background：十六进制色值：
		 -->
		 <div></div>
	</body>
</html>